<template>
  <div class="flex2 flex map_box positionR">
    <div id="map" style="width: 100%;height: 100%;"></div>
    <div class="font_s16 flexC JustifyContentSA cursor map-tab">
      <p @click="switchmap(1)">
        <img class="verticalM" style="height: 1.5rem;padding:0 1rem;" :src="category === 1 ? `${url}img/14.png` : `${url}img/15.png`" alt="" />
        <span style="height: 1.5rem;padding-bottom: .2rem;display: inline-block">全部</span>
      </p>
      <p @click="switchmap(2)">
        <img class="verticalM" style="height: 1.5rem;padding:0 1rem;" :src="category === 2 ? `${url}img/14.png` : `${url}img/15.png`" alt="" />
        埋葬点
      </p>
    </div>
    <ModalGreenPolygon v-if="mapInfoModal"
                       @hidden="hidden(mapInfoModal)" >
       <map-info :data="presentData"
                 :acupointsList="acupointsList" />
    </ModalGreenPolygon>
    <ModalSquare v-if="tombsSale" @hidden="hidden(tombsSale)">
      <TombsSale :dataList=TombsSaleList
                  v-if="mapModalType === 5" />
      <MzdDetails :dataList="mzdDetailsList"
                  v-if="mapModalType === 4" />
    </ModalSquare>
    <modal v-if="ylyujingtc">
      <MapBZModel
              :yujingdata=yujingdata
              @hidden="hidden(ylyujingtc)"></MapBZModel>
    </modal>
  </div>
</template>

<script>
  import { gdmapOther } from '../../assets/gdmap'
  import { queryBzfwOrgNoPageList, queryScreenBurialSiteNoPage, queryNosoldGrave, queryWarnOrgInfoByWarnId} from '@/api/home'
  import ModalGreenPolygon from "../../components/ModalGreenPolygon";
  import MapInfo from "../comprehensive/mapModal/MapInfo";
  import ModalSquare from "../../components/ModalSquare";
  import TombsSale from "../comprehensive/mapModal/TombsSale";
  import MzdDetails from "../comprehensive/mapModal/MzdDetails";
  import Modal from "../../components/Modal";
  import MapBZModel from "../comprehensive/mapModal/MapBZModel";
  export default {
    name: "Map",
    components: {MapBZModel, Modal, MzdDetails, TombsSale, ModalSquare, MapInfo, ModalGreenPolygon},
    data () {
      return {
        pageNum: 0,
        url: process.env.BASE_URL,
        category: 1,
        isActive: 1,
        orgId: null,
        mapListData: [],
        mzdMapList: [],
        mapType: 2,
        mzdDetailsList: [],
        tombsSale: false,
        mapInfoModal: false,
        mzdDetails: false,
        acupointsList: [
          { title: '占地面积总数（亩）', num: 0 },
          { title: '剩余可造墓土地面\n积总数（亩）', num: 0 },
          { title: '从业人员总数（人）', num: 0 },
          { title: '最大承载力（人）', num: 0 },
          { title: '销售墓穴总数（穴）', num: 0 },
          { title: '具备本科以上学历\n从业人员数（人）', num: 0 },
          { title: '节地墓穴销售\n总数(穴)', num: 0 },
          { title: '落葬墓穴总数(穴）', num: 0 },
          { title: '落葬节地墓穴\n总数(穴）', num: 0 },
          { title: '寄存格位存放</n>\n总数(穴）', num: 0 },
          { title: '办理节地葬补贴总\n数(人）', num: 0 },
          { title: '具有墓地管理员资质\n的从业人员数量(人）', num: 0 }
        ],
        presentData: null,
        TombsSaleList: [],
        mapModalType: 0,
        yujingdata: Object,
        ylyujingtc: false
      }
    },
    mounted () {
      window.vm = this
      this.gdmap()
      this.getMap(this.orgId)
    },
    methods: {
      gdmap () {
        /*eslint-disable no-undef*/
        this.map = new AMap.Map('map', {
          resizeEnable: true,
          showLabel: true,
          mapStyle: 'amap://styles/dark',
          zoom: 9.5,
          /* rotation: 0, // 设置地图旋转角度45
          pitch: 30, // 设置俯仰角度（0~45）
          viewMode: '3D', */
          center: [121.520043,31.211586],
          features: ['bg', 'road', 'building', 'point'],
          viewMode:'3D',
        })
        window.gmap = this.map
        this.$root.MapGd = this.map
      },
      getMap (id) {
        queryBzfwOrgNoPageList ({
          orgId: id
        }).then((response) => {
          if (response.data) {
            if (id) {
              this.presentData = response.data.response[0]
              this.acupointsList[0].num = this.presentData.orgArea
              this.acupointsList[1].num = this.presentData.canBuiltArea
              this.acupointsList[2].num = this.presentData.practitioner
              this.acupointsList[3].num = this.presentData.maxPeople
              this.acupointsList[4].num = this.presentData.soldGraveAll
              this.acupointsList[5].num = this.presentData.practitionerBkys
              this.acupointsList[6].num = this.presentData.soldGraveSaveland
              this.acupointsList[7].num = this.presentData.buriedGraveAll
              this.acupointsList[8].num = this.presentData.buriedGraveSaveland
              this.acupointsList[9].num = this.presentData.depositboxUsed
              this.acupointsList[10].num = this.presentData.savelandSubsidies
              this.acupointsList[11].num = this.presentData.practitionerQualified
            } else {
              this.mapListData = response.data.response
              gdmapOther(window.gmap, this.mapListData, this.mapType, this.mapType)
            }
          }
        }).catch((response) => {
          console.log(response)
        })
      },
      mzdMap (orgId) {
        queryScreenBurialSiteNoPage ({
          burialSiteId:orgId
        }).then((response) => {
          if (response.data) {
            if(orgId) {
              this.mzdDetailsList = response.data.response
            } else {
              this.mzdMapList = response.data.response
              gdmapOther(window.gmap, this.mzdMapList, this.mapType, this.mapType)
            }
          }
        }).catch((response) => {
          console.log(response)
        })
      },
      queryWarnInfo(expectWarnId, warnType) {
        queryWarnOrgInfoByWarnId({
          expectWarnId: expectWarnId,
          warnType: warnType
        }).then((response) => {
          if (response.data) {
            this.yujingdata = response.data.response
            this.ylyujingtc = true
          }
        }).catch((response) => {
          console.log(response)
        })
      },
      switchmap (index) {
        this.category = index
        this.$root.MapGd = null
        window.gmap.clearMap()
        if (index === 1) {
          this.mapType = 2
          this.getMap()
        } else {
          this.mapType = 3
          this.mzdMap(this.orgId)
        }
      },
      queryNosold(id) {
        queryNosoldGrave({
          orgId: id
        }).then((response) => {
          if (response.data) {
            this.TombsSaleList = response.data.response
          }
        }).catch((response) => {
          console.log(response)
        })
      },
      opencs (index, orgId, warnType) {
        this.orgId = orgId
        this.mzdDetailsList = []
        this.mapModalType = index
        if (index === 2) {
          this.mapInfoModal = true
          this.getMap(orgId)
        } else if (index === 5) {
          this.tombsSale = true
          this.queryNosold(orgId)
        } else if (index === 4) {
          //埋葬点详情
          this.tombsSale = true
          this.mzdMap(orgId)
        } else if (index === 8) {
          //预警详情
          this.queryWarnInfo(orgId, warnType)
        }
      },
      hidden(choose) {
        if (choose === this.mapInfoModal) {
          this.mapInfoModal = false
        }
        if (choose === this.tombsSale) {
          this.tombsSale = false
        }
        if (choose === this.ylyujingtc) {
          this.ylyujingtc = false
        }
      }
    }
  }
</script>

<style scoped lang="scss">
.map_box {
  margin: 0 .5rem;
}
.map-tab {
  position: absolute;
  height: 5rem;
  padding: 0.5rem;
  top: 80%;
  right: 1%;
  color: #CEF9FC;
  background: #021131;
  border-radius: 16px;
}
</style>